<script setup>
import { ref } from 'vue'

const list = ref([
  {
    id: 1,
    name: '工程与基础保障类',
    value: 277,
    children: [
      {
        id: 1,
        name: '工程机械',
        value: 277,
      },
      {
        id: 2,
        name: '危废转运',
        value: 277,
      },
      {
        id: 3,
        name: '战勤保障',
        value: 277,
      },
      {
        id: 4,
        name: '其他类型',
        value: 277,
      },
    ],
  },
  {
    id: 2,
    name: '消防救援核心作战类',
    value: 277,
    children: [
      {
        id: 1,
        name: '灭火主战',
        value: 277,
      },
      {
        id: 2,
        name: '抢险救援',
        value: 277,
      },
      {
        id: 3,
        name: '举高喷射',
        value: 277,
      },
    ],
  },
  {
    id: 3,
    name: '抢险救援与危化处置类',
    value: 277,
    children: [
      {
        id: 1,
        name: '抢险救援',
        value: 277,
      },
      {
        id: 2,
        name: '危化处置',
        value: 277,
      },
    ],
  },
  {
    id: 4,
    name: '地震救援类',
    value: 277,
    children: [
      {
        id: 1,
        name: '地震救援',
        value: 277,
      },
      {
        id: 2,
        name: '地震救援',
        value: 277,
      },
    ],
  },
])

const hoveredParent = ref(null)
const hoveredChild = ref(null)
const hoveredRow = ref(null)

const handleParentHover = (parent, row) => {
  hoveredParent.value = parent
  hoveredRow.value = row
}

const handleChildHover = (child) => {
  hoveredChild.value = child
}

const clearHover = () => {
  hoveredParent.value = null
  hoveredChild.value = null
  hoveredRow.value = null
}

const getChildBgColor = (index) => {
  const colors = ['bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-purple-500']
  return colors[index % colors.length]
}

const getArrowPosition = (parent) => {
  // 根据父级盒子的位置计算箭头位置
  const index = list.value.indexOf(parent)
  // 第一行：index 0 和 1
  // 第二行：index 2 和 3
  if (index < 2) {
    // 第一行的父级盒子
    return index === 0 ? 'left-1/4' : 'left-3/4'
  } else {
    // 第二行的父级盒子
    return index === 2 ? 'left-1/4' : 'left-3/4'
  }
}
</script>

<template>
  <div class="min-h-screen bg-gray-100 p-8">
    <div class="grid grid-cols-2 gap-6 max-w-4xl mx-auto">
      <!-- 第一行 -->
      <template v-if="hoveredRow === 'second'">
        <div class="col-span-2 rounded-xl p-4 relative transition-all duration-500 ease-out min-h-[200px]" style="border: 1px solid rgba(47, 210, 255, 0.3686); background: linear-gradient(180deg, rgba(44, 166, 253, 0.14) 0%, rgba(44, 166, 253, 0.1) 100%);">
          <div :class="['absolute -bottom-2 left-1/2 transform -translate-x-1/2 transition-all duration-500 ease-out', getArrowPosition(hoveredParent)]">
            <div class="w-0 h-0 border-l-8 border-r-8 border-t-8 border-transparent transition-all duration-500 ease-out" style="border-top-color: rgba(44, 166, 253, 0.1); border-bottom: none;"></div>
          </div>
          <div class="flex gap-2">
            <div v-for="(child, index) in hoveredParent.children" :key="child.id"
                 class="flex-1 bg-transparent rounded-xl shadow-none p-4 hover:shadow-none transition-all duration-500 ease-out flex flex-col items-center">
              <div :class="['w-20 h-20 rounded-full mb-4 transition-all duration-500 ease-out', getChildBgColor(index)]"></div>
              <h2 class="text-xl font-bold text-gray-800 mb-2 text-center transition-all duration-500 ease-out">{{ child.name }}</h2>
              <div class="text-3xl font-bold text-blue-600 transition-all duration-500 ease-out">{{ child.value }}</div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div v-for="(item, index) in list.slice(0, 2)" :key="item.id" 
             class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-500 ease-out flex flex-col items-center relative"
             @mouseenter="handleParentHover(item, 'first')"
             @mouseleave="clearHover">
          <div class="w-20 h-20 bg-blue-500 rounded-full mb-4 transition-all duration-500 ease-out"></div>
          <h2 class="text-xl font-bold text-gray-800 mb-2 text-center transition-all duration-500 ease-out">{{ item.name }}</h2>
          <div class="text-3xl font-bold text-blue-600 transition-all duration-500 ease-out">{{ item.value }}</div>
        </div>
      </template>

      <!-- 第二行 -->
      <template v-if="hoveredRow === 'first'">
        <div class="col-span-2 rounded-xl p-4 relative transition-all duration-500 ease-out min-h-[200px]" style="border: 1px solid rgba(47, 210, 255, 0.3686); background: linear-gradient(180deg, rgba(44, 166, 253, 0.14) 0%, rgba(44, 166, 253, 0.1) 100%);">
          <div :class="['absolute -top-2 left-1/2 transform -translate-x-1/2 transition-all duration-500 ease-out', getArrowPosition(hoveredParent)]">
            <div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-transparent transition-all duration-500 ease-out" style="border-bottom-color: rgba(44, 166, 253, 0.1); border-top: none;"></div>
          </div>
          <div class="flex gap-2">
            <div v-for="(child, index) in hoveredParent.children" :key="child.id"
                 class="flex-1 bg-transparent rounded-xl shadow-none p-4 hover:shadow-none transition-all duration-500 ease-out flex flex-col items-center">
              <div :class="['w-20 h-20 rounded-full mb-4 transition-all duration-500 ease-out', getChildBgColor(index)]"></div>
              <h2 class="text-xl font-bold text-gray-800 mb-2 text-center transition-all duration-500 ease-out">{{ child.name }}</h2>
              <div class="text-3xl font-bold text-blue-600 transition-all duration-500 ease-out">{{ child.value }}</div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div v-for="(item, index) in list.slice(2)" :key="item.id" 
             class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-500 ease-out flex flex-col items-center relative"
             @mouseenter="handleParentHover(item, 'second')"
             @mouseleave="clearHover">
          <div class="w-20 h-20 bg-blue-500 rounded-full mb-4 transition-all duration-500 ease-out"></div>
          <h2 class="text-xl font-bold text-gray-800 mb-2 text-center transition-all duration-500 ease-out">{{ item.name }}</h2>
          <div class="text-3xl font-bold text-blue-600 transition-all duration-500 ease-out">{{ item.value }}</div>
        </div>
      </template>
    </div>
  </div>
</template> 